<template>
    <div>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
<!--            表格-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
<template slot="isok" slot-scope="scope">
    <i v-if="scope.row.cat_deleted === false" class="el-icon-success" style="color:lightgreen"></i>
    <i v-else class="el-icon-error"></i>
</template>
    <template slot="order" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level==0" size="mini">一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level==1" size="mini" type="success">二级</el-tag>
        <el-tag v-else size="mini" type="warning">三级</el-tag>
    </template>
    <template slot="opt" slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
    </template>
</tree-table>
<!--            分页-->
            <Pager :queryInfo="queryInfo"
                   :total="total"
                   @handleSizeChange="handleSizeChange"
                   @handleCurrentChange="handleCurrentChange"></Pager>
<!--            添加分类的对话框-->
            <el-dialog
                    title="添加分类"
                    :visible.sync="dialogVisible"
                    width="50%" @close="addCateDialogClose">
                <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateForm" label-width="100px" >
                    <el-form-item label="分类名称：" prop="cat_name">
                        <el-input v-model="addCateForm.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类：" >
                        <el-cascader
                                v-model="selectedKeys"
                                :options="parentCateList"
                                :props="cascader"
                                @change="handleChange"  clearable ></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import Pager from '../Pager'
    export default {
        data() {
            return {
                selectedKeys:[],
                cascader:{
                  value:'cat_id',
                  label:'cat_name',
                  children:'children',
                    expandTrigger:'hover'

                },
                addCateForm:{
                    cat_name:'',
                    cat_pid: 0,
                    cat_level:0


                },
                dialogVisible:false,
                queryInfo:{
                    pagenum:1,
                    pagesize:2,
                    type:3
                },
                cateList: [],
                total:0,
                columns:[
                    {
                        label: "分类名称",
                        prop:"cat_name"
                    },
                    {
                        label: "是否有效",
                        type:"template",
                        template:"isok"
                    },
                    {
                        label: "排序",
                        type:"template",
                        template:"order"
                    },
                    {
                        label: "操作",
                        type:"template",
                        template:"opt"
                    }
                    ],
                addCateFormRules:{
                    cat_name:[
                         { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ]
                },
                parentCateList:[]

            }

        },
        created() {
            this.getCateList();
        },
        methods: {
            async getCateList(){
                const {data:res}=await this.$http.get("categories",{params:this.queryInfo});
                if(res.meta.status!==200){
                    this.$message.error("获取失败")
                }else{
                    this.cateList=res.data.result
                    this.total=res.data.total
                }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.queryInfo.pagesize = val;
                this.getCateList();
            },
            handleCurrentChange(val){
                this.queryInfo.pagenum = val;
                this.getCateList();
            },
            addCateDialog(){
                this.getParentCateList()
                this.dialogVisible=true

            },
            //获取父级分离的数据列表
           async getParentCateList(){
               const {data: res} = await this.$http.get("categories", {params: {type: 2}});
               if(res.meta.status!=200){
                   this.$message.error("获取父级数据失败")
               }else{
                   this.parentCateList=res.data
               }
            },
            //选择项发生变化触发这个函数
            handleChange(){
                if(this.selectedKeys.length>0){
                  this.addCateForm.cat_pid= this.selectedKeys[this.selectedKeys.length-1]
                    this.addCateForm.cat_level=this.selectedKeys.length
                }else{
                    this.addCateForm.cat_pid=0
                    this.addCateForm.cat_level=0
                }
            },
            //监听对话框的关闭
            addCateDialogClose(){
              this.$refs.addCateForm.resetFields()
                this.selectedKeys=[]
                this.addCateForm.cat_pid=0
                this.addCateForm.cat_level=0
            },
            //添加分类
            addCate(){
                this.$refs.addCateForm.validate(async valid=>{
                    if(!valid){return}
                    const {data: res} = await this.$http.post('categories', this.addCateForm);
                    if(res.meta.status!=201){
                        this.$message.error("添加分类失败");
                    }else{
                        this.$message.success("添加分类成功")
                        this.getCateList()
                        this.addCateDialogClose()
                    }
                })
            }
        },
        components:{
            Pager
        }
    }
</script>

<style lang="less" scoped>
.el-cascader{
    width: 100%;
}
</style>